<script setup lang="ts">
defineOptions({
  name: 'policyIndex'
});
import { getPolicyList } from "@/api/policy";
import { usePaging } from "@/hooks/pagination";
import type { Policy } from "@/types/policy";
import { useDetail } from "@/hooks/detail";
const { navDetail } = useDetail()
const { queryParams, setQueryParms, total, loadData } = usePaging();
setQueryParms({

})
const policyList = ref<Policy[]>()

onMounted(() => {
  getData()
})

function getData() {
  loadData(getPolicyList).then(res => {
    policyList.value = res.rows
  })
}
const activeName = ref('first');
function handleClick(tab: string) {
  console.log(tab);
}
</script>
<template>
  <div>
    <div class="w-1200 m-auto">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="政策法规" name="first">
          <div class="consult-content grid grid-cols-2 gap-4 mt-4">
            <div class="consult-content-x flex flex-col" v-for="(item, i) in policyList" :key="i"
              @click="navDetail(item.id, '2')">
              <h2 class="text-4.5">{{ item.title }}</h2>
              <div class="col9 text-3 mt-auto">
                <span style="padding-right: 30px;">阅读量：{{ item.viewCount }}</span>
                <span class="inline-block float-right" style="margin-left: auto;">时间：{{ item.createTime }} </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="mt-15 mb-20 flex justify-center">
        <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.pageNum"
          @change="getData" v-model:page-size="queryParams.pageSize" :total="total" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.consult-content-x {
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 81, 255, .1);
  height: 140px;
  padding: 20px;
  cursor: pointer;

  p,
  h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
</style>
